import React, { Component, createRef } from "react";

export default class TodoItem extends Component {
  constructor() {
    super();
    this.state = {
      isEdit: false, //控制编辑状态
    };
    this.editInput = createRef();
  }
  handleEdit = () => { //进入编辑状态
    this.setState(
      {
        isEdit: true,
      },
      () => {
        this.editInput.current.focus();
      }
    );
  };
  handleBlur = ()=>{ //失焦事件
    this.setState({
      isEdit:false
    })
    let {handleUpdate,objectId} = this.props
    handleUpdate(objectId,this.editInput.current.value) //向父组件传递最新的任务名称
  }
  render() {
    let { taskname, ischeck, objectId, idx } = this.props;
    let { handleCheck, handleDel } = this.props;
    let { isEdit } = this.state;
    let complete = ischeck ? "completed" : "";
    let edit = isEdit ? "editing" : "";
    return (
      // <li className={(ischeck?'completed':'')+(isEdit?'editing':'')}>
      <li className={`${complete} ${edit}`}>
        <div className="view">
          <input
            type="checkbox"
            className="toggle"
            checked={ischeck}
            onChange={() => {
              handleCheck(objectId);
            }}
          />
          <label onDoubleClick={this.handleEdit}>{taskname}</label>
          <button
            className="destroy"
            onClick={() => {
              handleDel(objectId);
            }}
          ></button>
        </div>
        <input
          type="text"
          className="edit"
          defaultValue={taskname}
          ref={this.editInput}
          onBlur={this.handleBlur}
        />
      </li>
    );
  }
}
